<template>
  <div class="home">
    <van-form @submit="shareSubmit">
      <van-button type="info" block native-type="submit"></van-button>
    </van-form>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <div class="title"></div>
        <div class="header"></div>
        <div class="body">
          <vue-qr :text="config.value" :size="200"></vue-qr>
        </div>
        <div class="footer"></div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
  import { Form, Button, Overlay } from 'vant'
  import VueQr from 'vue-qr'
  export default {
    name: 'ZryResult',
    data() {
      return {
        show: false,
        config: {
          value: 'http://crm.mgm-iot.com:8667/eqxiu/#/?spreadUserId=' +  localStorage.getItem('spreadUserId'),
          // imagePath: require('../assets/images/logo.png'),
          BYTE_POS: 'red'
        }
      }
    },
    components: {
      VueQr,
      'van-form': Form,
      'van-button': Button,
      'van-overlay': Overlay,
    },
    methods: {
      shareSubmit(){
        // this.show = true;
        this.$router.push({ path: '/zry/ZryShare' }) 
      }
    }
  }
</script>

<style lang="less" scoped>
  .home{
    background: url("../../assets/images/zry/b3.png") no-repeat 100% 0;
    background-size: 100%;
    .wrapper {
      .title {
        height: 4em;
        margin: 4em 4em 1em 4em;
        background: url("../../assets/images/zhd/title.png") no-repeat 50% 0px;
      }
      .header {
        height: 4em;
        margin: 1em;
        background: url("../../assets/images/zhd/header.png") no-repeat 50% 0px;
        background-size: 100%;
      }
      .body {
        img {
          margin-left: 0.9rem;
        } 
      }
      .footer {
        height: 4em;
        margin: 1em 6em 1em 6em;
        background: url("../../assets/images/zhd/footer.png") no-repeat 50% 0px;
        background-size: 100%;
      }
      button {
        height: 6em;
        width: 100%;
        margin: 0 auto;
        background: url('../../assets/images/zhd/ic-close.png') no-repeat 50% 0px;
        background-size: 16%
      }
    }
    button {
      width: 75%;
      margin: 0 auto;
      margin-top: 40em;
      background: url('../../assets/images/zhd/btn-3.png') no-repeat 50% 50%;
      background-size: 100%;
      border: none;
    }
  }
</style>
